<template>
  <div class="container">
    <a-form ref="formRefUserInfo"
            :model="formDataUserInfo"
            :rules="formRulesUserInfo"
            layout="vertical"
            @submit-success="handleSubmit"
    >
      <a-form-item field="nickName" label="昵称" tooltip="昵称只能包含中文字符、英文字符和数字">
        <a-input v-model="formDataUserInfo.nickName" :style="{width: '20%'}" placeholder="请输入昵称" />
      </a-form-item>
      <a-form-item field="gender" label="性别">
        <a-select v-model="formDataUserInfo.gender" :style="{width: '20%'}" placeholder="请选择性别">
          <a-option value="N"></a-option>
          <a-option value="M">男</a-option>
          <a-option value="F">女</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="email" label="邮箱">
        <a-input v-model="formDataUserInfo.email" :style="{width: '20%'}" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item field="phone" label="手机号码">
        <a-input v-model="formDataUserInfo.phone" :style="{width: '20%'}" placeholder="请输入手机号码" :max-length="11" @input="onInputPhone"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" :loading="loading">
          保存
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {useUserStore} from '@/store';
import useLoading from '@/hooks/loading';
import {editInfo, EditUserInfoParams} from "@/api/user/user.ts";
import {Message} from "@arco-design/web-vue";

const userStore = useUserStore();
const { loading, setLoading } = useLoading();

const formRulesUserInfo = {
  nickName: [
    {
      required: true,
      message:'昵称为必填',
    },
    {
      validator: (value, cb) => {
        const regex = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
        if (!regex.test(value)) {
          cb("昵称只能包含中文字符、英文字符和数字");
        }

      }
    }
  ],
  email: [
    {
      validator: (value, cb) => {
        const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!regex.test(value)) {
          cb("请输入正确的邮箱");
        }

      }
    }
  ],
  phone: [
    {
      validator: (value, cb) => {
        const regex = /^1\d{10}$/;
        if (!regex.test(value)) {
          cb("请输入正确的手机号");
        }

      }
    }
  ]
}

const formRefUserInfo = ref();
const formDataUserInfo = ref({
  nickName: userStore.nickName,
  gender: userStore.gender,
  email: userStore.email,
  phone: userStore.phone
});

// 保存基本信息
const handleSubmit = async () => {
  setLoading(true);
  const params: EditUserInfoParams = JSON.parse(JSON.stringify(formDataUserInfo.value));
  try {
    const {code} = await editInfo(params);
    if (code === 200) {
      await userStore.info();
      Message.success({
        content: '保存成功',
        duration: 2 * 1000,
      });
    }
  } catch (err) {
    console.log(err)
  } finally {
    setLoading(false);
  }
}

// 手机输入框输入校验
const onInputPhone = (value: string) => {
  formDataUserInfo.value.phone = value.replace(/\D/g, '');
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
}
</style>
